<template>
  <div class="content_wrap background_box">
    <headback :title="t('userDetail')" class="border_bottom">
    </headback>
    <div class="page topHead">
      <div class="group_title_box icon_uploader">
        <van-uploader :reupload="true" :after-read="afterRead" :deletable="false" v-if="store.state.myUserObj.avatar" name="shopIcon"
          :key="1111" v-model="fileList" :max-count="1" />
        <van-uploader v-else :after-read="afterRead">
          <van-loading v-if="loadingFile"></van-loading>
          <Blockies v-else class="border_radius" :seed="store.state.myUserObj.owner" :size='20' :scale='2' spotcolor="#000" />
        </van-uploader>
        <div class="flex">
          <div class="group_name">
            {{ (store.state.myUserObj.owner && splitAddress(store.state.myUserObj.owner)) }}
            <i  class="copyimg  iconfont icon-fuzhi_line" v-copy="store.state.myUserObj.owner"></i>
          </div>
        </div>

      </div>
      <van-cell-group>
        <van-cell :title="t('username')" @click="editGroup(2)" :value="store.state.myUserObj.nickname" is-link >
          <template #icon>
            <van-icon class="edit_icon"  name="edit" />
        </template>
        </van-cell>
        <van-cell :title="t('userDescribe')" @click="editGroup(3)" :value="store.state.myUserObj.describe"  is-link  >
          <template #icon>
            <van-icon class="edit_icon"  name="edit" />
        </template>
        </van-cell>
        <van-cell :title="t('isPing')"      >
          <template #right-icon>
              <van-switch v-model="isPing" @change="updateUserIsClose()" :loading="loadingList"  :label="1111" size="18px"
                            :active-color="store.state.themeColor" inactive-color="#dcdee0" />
                    </template>
          <template #icon>
            <van-icon class="edit_icon"  name="edit" />
        </template>
        </van-cell>
        <van-cell :title="t('绑定默认交易员')" @click="editGroup(5)" :value="shopName"  is-link  >
          <template #icon>
            <van-icon class="edit_icon"  name="edit" />
        </template>
        </van-cell>
        <!-- 是否接受平仓 -->
      </van-cell-group>
    </div>
  </div>
  <van-popup v-model:show="showPopover" position="center"  round :style="{ 'max-height': '80%' }">
    <div class="wrapper">
      <div class="wrapper2">
        <div class="title_head theme_color light_border_bottom">
          <div  class="titleClass"> {{ editType==2? t('username'):t('userDescribe') }}</div>
        </div>
        <div v-if="editType==2" class="form_content">
          <van-field v-model="userName" clearable label="" :placeholder="t('username')" />
        </div>
        <div v-else class="form_content textArea_field">
            <van-field v-model="describe" type="textarea" rows="1" autosize 
              :placeholder="t('userDescribe')" />
          </div>
      </div>
      <van-button :loading="loadingList" class="popbtn" @click="setGroup()" type="primary">{{
        t('confirm') }}</van-button>
    </div>
  </van-popup>
  <shopChoose
    v-model="showShop"
    v-model:checkedValue="shopId"
    @change="shopChange"
  ></shopChoose>
  <van-overlay :show="bindLoading">
    <div class="loadingBox">
      <van-loading color="#1989fa" >上链中...</van-loading>

    </div>
  </van-overlay>
</template>

<script setup>
import userEth from "@/utils/userEth.js"
import { showToast } from 'vant'
import { useStore } from "vuex";
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { ethers } from "ethers";
import { upload} from "@/api/User.js";
import {IPFS_PUBLIC_URL} from "@/utils/config.js"
import Blockies from '@/components/blockVue.vue'
import { splitAddress } from '@/utils/index.js'
import eth from "@/utils/eth.js"
const isPing = ref(false)
const describe = ref('')
const editType = ref(1)
const loadingFile = ref(false)
const loadingList = ref(false)
const showPopover = ref(false)
const bindLoading = ref(false)
const showShop = ref(false);
const shopId = ref("");
const shopName = ref('')
const shopChange = async (item) => {
  //  上链
  try {
    bindLoading.value = true
    let hex  = await userEth.ContractWithSinger.updateUserTarder(item.account)
    await hex.wait()
    showToast(t('setSuccessful'))
    getMyInfo()
    shopId.value = item.account;
    shopName.value = item.name;
    bindLoading.value = false
  } catch (error) {
    bindLoading.value = false
    showToast(t('setFail'))
  }
};
const { locale, t } = useI18n();
const store = useStore();
import { useRouter } from "vue-router";
const router = useRouter();
const getMyInfo = async () => {
  const account = await eth.getAccount();
  let obj = await userEth.getUseInfo(account)
  isPing.value = obj.isCloseOut || false
  store.commit('changeMyUserObj', obj)
  fileList.value = [{
    url: store.state.myUserObj.avatar,
    isImage: true,
  }]
  if(obj.trader&&obj.trader!='0x0000000000000000000000000000000000000000'){
    let item = store.state.shopList.find(res=>res.account==obj.trader)
    shopName.value = item.name || ''
    shopId.value = obj.trader || ''

  }
}
const userImg = ref('')
const userName = ref('名称')
const updateUserIsClose = ()=>{
  editType.value = 4
  setGroup()
}
const setGroup = async (callback) => {
  try {
    let value = ''
    if (editType.value == 1) {
      value = userImg.value
    } else if (editType.value == 2) {
      value = userName.value
    }else if(editType.value==3){
      value = describe.value
    }else if(editType.value==4) {
      value = isPing.value
    }
    if(editType.value != 1){
      loadingList.value = true
    }
    let hex = null
    if(editType.value==4){
      hex = await userEth.ContractWithSinger.updateUserIsClose(value)
    }else{
      hex = await userEth.ContractWithSinger.updateUserInfo(editType.value, value)
    }
    await hex.wait()
    if (callback) {
      callback()
    }
    showToast(t('setSuccessful'))
    showPopover.value = false
    getMyInfo()
    loadingList.value = false
  } catch (error) {
    loadingFile.value = false
    loadingList.value = false
    showToast(t('setFail'))
  }
}
const editGroup = (value) => {


  editType.value = value
  if(value==5){
    showShop.value = true;
    return
  }
  
  userName.value = store.state.myUserObj.nickname
  describe.value = store.state.myUserObj.describe
  showPopover.value = true
}
const fileList = ref({})
const afterRead = (file) => {
  loadingFile.value = true
  file.status = 'uploading'
  upload(file.file)
    .then((res) => {
      let obj = {
        status: 'done',
        url: IPFS_PUBLIC_URL + res.data.IpfsHash,
        isImage: true,
        type: file.file.type.startsWith('image') ? 'img' : (file.file.type.startsWith('video') ? 'video' : '')
      }
      userImg.value = res.data.IpfsHash
      const callFn = () => {
        fileList.value = [obj]
        loadingFile.value = false
      }
      editType.value = 1
      setGroup(callFn)
    })
    .catch((err) => {
      loadingFile.value = false
      file.status = 'failed';
      showToast(t('uploadFail'));
    });
};
const goToPage = (value) => {
  router.push({
    name: value
  })
}
getMyInfo()
</script>
<style>
.van-collapse-item__title--expanded {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
</style>

<style lang="scss" scoped>
.loadingBox{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.van-overlay{
  z-index: 10000;
}
.copyimg{
    color: var(--theme, #0b84fe);
    margin-left: 3px;
    font-size: 10px;
}
.popbtn{
  margin-top: 20px;
}
.textArea_field {
  .van-field {
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 10px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px 20px;
  min-width: 8rem;
  box-sizing: border-box;
  .wrapper2 {
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .form_content {
    flex: 1;
    width: 100%;
  }
  .title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .titleName {
      flex: 1;
      margin-left: 10px;
      font-size: 10px;
    }
  }

  .title_head {
    height: 40px;
    text-align: center;
    display: flex;
    max-width: 10rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    font-size: 12px;
    z-index: 7;

    .title_right {
      font-size: 16px;
      position: absolute;
      right: 10px;
      top: 10px;
      color: #888;
    }

    .titleClass {
      font-size: 14px;
      font-weight: bold;
      font-family: '微软雅黑';
    }
  }



    .van-button {
      height: 0.75rem;
      font-size: 0.34rem;
      font-weight: 500;
      border-radius: 0.53333rem;
    }
}
  .form_center {
    border-radius: 10px;
    padding: 10px 6px;

    .form_item {
      display: flex;
      padding: 0 0 0 10px;
      justify-content: space-between;
      align-items: center;

      .form_title {
        display: flex;
        align-items: center;
        opacity: 0.6;
        font-size: 12px;
        min-width: 54px;
      }

      .line_h30 {
        line-height: 30px;
      }

      .form_content {
        flex: 1;
      }

      .flex_right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 15px;
        color: var(--van-cell-value-color);
        font-size: 12px;
      }

      .describe_detail {
        // padding-right: 15px;
        color: var(--van-cell-value-color);
        font-size: 12px;
      }
    }

    .flex_column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      :deep .van-uploader__upload {
        height: 70px;
        width: 70px;
      }

      :deep .van-uploader__preview-image {
        height: 70px;
        width: 70px;
      }
    }
  }
.icon_uploader {
  // background: #888;
  :deep .van-uploader__upload {
    height: 55px;
    width: 55px;
    border-radius: 50%;
  }

  :deep .van-uploader__preview-image {
    height: 55px;
    width: 55px;
    border-radius: 50%;
  }
  :deep .van-uploader__mask{
    border-radius: 50%;
  }

}
.add_img2 {
  font-size: 22px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px 20px;
  min-width: 8rem;
  box-sizing: border-box;
  .wrapper2 {
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .form_content {
    flex: 1;
    width: 100%;
  }
  .title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .titleName {
      flex: 1;
      margin-left: 10px;
      font-size: 10px;
    }
  }

  .title_head {
    height: 40px;
    text-align: center;
    display: flex;
    max-width: 10rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    font-size: 12px;
    z-index: 7;

    .title_right {
      font-size: 16px;
      position: absolute;
      right: 10px;
      top: 10px;
      color: #888;
    }

    .titleClass {
      font-size: 14px;
      font-weight: bold;
      font-family: '微软雅黑';
    }
  }



    .van-button {
      height: 0.75rem;
      font-size: 0.34rem;
      font-weight: 500;
      border-radius: 0.53333rem;
    }
}
:deep .van-cell__right-icon {
  font-size: 12px;
  color: #fff;
}
.group_title_box {
  padding: 0 10px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;

  .group_name {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    font-weight: 600;
    font-size: 11px;
  }

  .edit_icon {
    font-size: 16px;

  }
}
.content_wrap {
  box-sizing: border-box;

  .page {
    padding: .4rem;

    .row {
      display: flex;
      justify-content: space-between;
      gap: 10px;

      .cell {
        display: flex;
        align-items: center;
        flex: 1;
        min-height: 1.86667rem;
        padding: .53333rem .26667rem;
        box-sizing: border-box;
        border-radius: .26667rem;
        border: 1px solid $primary-color;

        .cell_line {
          display: flex;
          // align-items: flex-start;
          align-items: center;

          img {
            width: 25px;
          }

          svg {
            width: 25px;
          }
        }

        .data {
          margin-top: .13333rem;
          font-size: .4rem;
        }

        .box {
          margin-left: 5px;
          font-size: .32rem;

          .data {
            color: #f39020;
            font-size: 12px;
            font-weight: bold;
          }


        }
      }
    }

    .referrer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 8px 0;
      padding: 0 .4rem;
      height: 1.2rem;
      border-radius: .26667rem;

      .no_data {
        color: #999;
      }

      .canclick {
        color: #f7a460;
      }

      .address {
        font-size: .37333rem;
        font-weight: 500;
      }

      img {
        width: .32rem;
        height: .32rem;
      }
    }

    .list {
      border-radius: .26667rem;

      .title {
        font-size: 0.32rem;
        line-height: 0.4rem;
        margin-bottom: 8px;
      }

      .address {
        font-size: 0.32rem;
        line-height: 0.4rem;
      }

      .line_item {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item_title {}
      }

      .van-collapse-item {
        margin-bottom: 8px;
      }

      :deep .van-collapse-item__content {
        padding: 10px 10px;
      }

      :deep .van-cell {
        background: linear-gradient(to bottom, $primary-color, $primary-color);
        border-radius: 8px;
        color: #fff;
      }

      :deep .van-collapse-item__title--expanded:after {
        display: none;
      }

      $color2: '#222222';

      :deep .van-collapse-item__content {
        color: #fff;
        background: $primary-color;
        opacity: 0.8;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      .van-hairline--top-bottom:after {
        border: none;
      }


      li {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: .4rem 0;

        .cell:first-child {
          -webkit-box-flex: 30%;
          -webkit-flex: 30% 0 0;
          -ms-flex: 30% 0 0;
          flex: 30% 0 0;
          text-align: left;
        }

        .cell {
          text-align: center;
        }
      }
    }
  }

}

.dialog_box {
  padding: 30px 10px;
  min-width: 8rem;

  .van-button {
    width: 100%;
    height: 30px;
    margin-top: 20px;
  }

  .van-button.van-button--primary {
    border: none;
    font-size: 12px;
    font-weight: 400;
  }

  .van-field {
    height: 1.2rem;
    margin-top: 20px;
    display: flex;
    align-items: center;
    border-radius: 0.21333rem;
    border: 0.02667rem solid rgba(199, 199, 205, 0.5);
  }

  .van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.26rem 0.42rem;
    overflow: hidden;
    color: var(--van-cell-text-color);
    font-size: 0.37rem;
    line-height: 0.64rem;
  }

  .title {
    font-size: 13px;
    text-align: center;
  }
}
</style>
